<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生数据管理系统</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
        }

        h1 {
            font-size: 25px;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="layui-panel">
    <div style="padding: 32px;">
        <h1>学生数据管理系统</h1>

        <form class="layui-form layui-form-pane" action="" lay-filter="val-filter" style="margin-bottom: 15px;" onsubmit="return false;">
            <div class="layui-inline">
                <label class="layui-form-label">搜索</label>
                <div class="layui-input-block">
                    <input type="text" name="query" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="search_table">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="refresh_table">
                    <i class="layui-icon layui-icon-refresh"></i>
                </button>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-bg-orange" id="statistics_button">统计信息</button>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" onclick="add_student()">添加学生</button>
            </div>
        </form>

        <table class="layui-hide" id="ID-table-student-info"></table>
    </div>
</div>


<script type="text/html" id="ID-table-templet-operate">
    <div class="layui-clear-space">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" onclick="edit_student('{{= d.uid }}')">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="delete_student('{{= d.uid }}')">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
    </div>
</script>

<script src="/static/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-student-info',
            id: 'table-student-info',
            cols: [[ //标题栏
                {field: 'uid', title: '学号', width: 150, sort: true},
                {field: 'name', title: '姓名', width: 100},
                {field: 'sex', title: '性别', width: 80},
                {field: 'birth', title: '出生日期', width: 120},
                {field: 'address', title: '家庭住址', minWidth: 700},
                {title: '操作', templet: '#ID-table-templet-operate', width: 100}
            ]],
            url: "/api/get",
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 10 // 每页默认显示的数量
        });
    });
</script>
<script>
    // 按钮事件
    function delete_student(uid) {
        layer.confirm('确定要删除这位学生吗？', {icon: 3}, function () {
            // 发送请求
            layui.$.ajax({
                url: "/api/del?uid=" + uid,
                type: "get",
                async: false,
                success: function (data) {
                    layer.msg('删除成功。', {icon: 1});
                    layui.table.reloadData('table-student-info');
                },
                error: function () {
                    layer.msg('删除失败。', {icon: 2});
                }
            });
        });
    }

    function edit_student(uid) {
        // 找出对应学生信息
        var data = layui.table.getData('table-student-info');

        var student_info = null;

        for (let info of data) {
            if (info.uid === uid) {
                student_info = info;
                break;
            }
        }

        layer.open({
            title: '编辑学生',
            type: 2,
            content: ['/edit', 'no'],
            area: ['520px', '400px'],
            btn: ['保存', '取消'],
            success: function (layero, index, that) {
                var child_layui = window[layero.find('iframe')[0]['name']].layui;
                child_layui.form.val('val-filter', student_info);
            },
            yes: function (index, layero) {
                var child_layui = window[layero.find('iframe')[0]['name']].layui;
                data = child_layui.form.val('val-filter');

                // 发送请求
                layui.$.ajax({
                    url: "/api/edit",
                    data: {
                        uid: data.uid,
                        name: data.name,
                        sex: data.sex,
                        birth: data.birth,
                        address: data.address
                    },
                    type: "get",
                    async: false,
                    success: function (data) {
                        layer.msg('修改成功。', {icon: 1});
                        layui.table.reloadData('table-student-info');
                    },
                    error: function () {
                        layer.msg('修改失败。', {icon: 2});
                    }
                });

                layer.close(index);
                return true;
            }
        });
    }

    function add_student() {
        layer.open({
            title: '添加学生',
            type: 2,
            content: ['/add', 'no'],
            area: ['520px', '400px'],
            btn: ['保存', '取消'],
            yes: function (index, layero) {
                var child_layui = window[layero.find('iframe')[0]['name']].layui;
                data = child_layui.form.val('val-filter');

                // 发送请求
                layui.$.ajax({
                    url: "/api/add",
                    data: {
                        uid: data.uid,
                        name: data.name,
                        sex: data.sex,
                        birth: data.birth,
                        address: data.address
                    },
                    type: "get",
                    async: false,
                    success: function (data) {
                        layer.msg('添加成功。', {icon: 1});
                        layui.table.reloadData('table-student-info');
                    },
                    error: function () {
                        layer.msg('添加失败。', {icon: 2});
                    }
                });

                layer.close(index);
                return true;
            }
        });
    }

    // 刷新
    function refresh_data() {
        layui.form.val("val-filter", {query: ""});
        layui.table.reload('table-student-info', {
            page: {
                curr: 1
            },
            url: "/api/get",
        });
    }

    function search_data() {
        var query = layui.form.val("val-filter").query;
        layui.table.reload('table-student-info', {
            page: {
                curr: 1
            },
            url: '/api/search?query=' + query
        });
    }

    function statistics() {
        layer.alert('查看统计数据', {
            content: "<p style='text-align: center'>选择需要查看的统计数据</p>",
            btn: ['导出姓名排序', '查看年龄统计'],
            btnAlign: 'c', // 按钮居中显示
            btn1: function(){
                window.open("/api/sort");
            },
            btn2: function(){
                layer.open({
                    title: '统计信息',
                    type: 2,
                    content: ['/stat', 'no'],
                    area: ['600px', '400px'],
                    btn: ['确定'],
                    btnAlign: 'c', // 按钮居中显示
                    yes: function (index, layero) {
                        var child_layui = window[layero.find('iframe')[0]['name']].layui;
                        data = child_layui.form.val('val-filter');

                        layer.close(index);
                        return true;
                    }
                });
            }
        });
    }

    layui.$(document).on('click',"#refresh_table",function(){
        refresh_data();
    });

    layui.$(document).on('click',"#search_table",function(){
        search_data();
    })

    layui.$(document).on('click',"#statistics_button",function(){
        statistics();
    })
</script>
</body>
</html>